// src/router/index.tsx
import MainLayout from '@/layouts/MainLayout';
import HomePage from '@/pages/HomePage';
import { NotFound } from '@/pages/NotFound';
import { Box, CircularProgress } from '@mui/material';
import { FC, Suspense } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { generateRoutes } from './routes';

// 加载状态组件
const LoadingFallback: FC = () => (
    <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
        <CircularProgress />
    </Box>
);

// 根路由组件
const Router: FC = () => {
    // 生成路由列表
    const routeList = generateRoutes();

    return (
        <BrowserRouter>
            <Suspense fallback={<LoadingFallback />}>
                <Routes>
                    {/* 公共路由 */}
                    <Route path="/" element={<MainLayout><HomePage /></MainLayout>} />

                    {/* 受保护路由 */}
                    {routeList.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            element={<MainLayout><route.Component /></MainLayout>}
                        />
                    ))}

                    {/* 404 路由 */}
                    <Route path="*" element={<MainLayout><NotFound /></MainLayout>} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
};

export default Router;